<template>
	<view class="wanl-money">
		
		<view class="bg-orange header-bg">
			<view class="padding-bj header-box">
				<view class="top-header">
					<view class="title-box w50">
						<view class="margin-top margin-bottom-xs">
							<text class="money-title">{{data.score || 0}}</text>
						</view>
						<view class="duihuan" @click="openPopup(1, data.score)">兑换</view>
						<text class="title">购物积分</text>
					</view>
					
					<view class="line"></view>
					
					<view class="title-box w50">
						<view class="margin-top margin-bottom-xs">
							<text class="money-title">{{data.study_score || 0}}</text>
						</view>
						<view class="duihuan" @click="openPopup(2, data.study_score)">兑换</view>
						<text class="title">学习积分</text>
					</view>
					
					<view class="line"></view>
					
					<view class="title-box w50">
						<view class="margin-top margin-bottom-xs">
							<text class="money-title">{{data.share_score || 0}}</text>
						</view>
						<view class="duihuan" @click="openPopup(3, data.share_score)">兑换</view>
						<text class="title">分享积分</text>
					</view>
				</view>
				
				<view class="top-header margin-top-lg">
					<view class="title-box w30">
						<view class="margin-top margin-bottom-xs">
							<text class="money-title">{{data.sign_score || 0}}</text>
						</view>
						<view class="duihuan" @click="openPopup(4, data.sign_score)">兑换</view>
						<text class="title">签到积分</text>
					</view>
					
					<view class="line"></view>
					
					<view class="title-box w30">
						<view class="margin-top margin-bottom-xs">
							<text class="money-title">{{data.mjy_score || 0}}</text>
						</view>
						<view class="duihuan" @click="openPopup(5, data.mjy_score)">兑换</view>
						<text class="title">马家窑积分</text>
					</view>
					
					<view class="line"></view>
					
					<view class="title-box w30">
						<view class="margin-top margin-bottom-xs">
							<text class="money-title">{{data.mjy_gq || 0}}</text>
						</view>
						<text class="title">股权</text>
					</view>
				</view>
			</view>
			
		</view>
		
		
		<view class="cu-list menu sm-border">
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/new/scoreDetail?type=1')">
				<view class="content">
					<text class="wlIcon-jifen1 text-orange"></text>
					<text>购物积分明细</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/new/scoreDetail?type=2')">
				<view class="content">
					<text class="wlIcon-jifen1 text-orange"></text>
					<text>学习积分明细</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/new/scoreDetail?type=3')">
				<view class="content">
					<text class="wlIcon-jifen1 text-orange"></text>
					<text>分享积分明细</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/new/scoreDetail?type=4')">
				<view class="content">
					<text class="wlIcon-jifen1 text-orange"></text>
					<text>签到积分明细</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/new/scoreDetail?type=5')">
				<view class="content">
					<text class="wlIcon-jifen1 text-orange"></text>
					<text>马家窑积分明细</text>
				</view>
			</view>
			<view class="cu-item arrow" @tap="$wanlshop.to('/pages/new/scoreDetail?type=6')">
				<view class="content">
					<text class="wlIcon-jifen1 text-orange"></text>
					<text>股权明细</text>
				</view>
			</view>
		</view>
		
		
		<uniPopup ref="uniPopup">
			<view class="warp">
				<view class="modal-body">
					<image :src="$IMG_URL + '/static/images/modal_bg.png'" class="modalImage"></image>
					<view class="modal-box">
						<view class="flex align-center justify-center pb50">
							<view class="modal-title">{{poptitle}}</view>
							<image src="/static/images/close.png" class="close-image" @click="closeModel"></image>
						</view>
						
						<view class="margin-bottom-sm">当前可兑换{{poptitle2}}积分：<text>{{cur_score}}</text></view>
						
						<view class="input-box">
							<view class="input-title">兑换数量</view>
							<input placeholder="请输入兑换数量" 
							placeholder-style='text-align:right;font-size: 26rpx;'
							v-model="num"
							autocomplete="off"
							></input>
						</view>
						
						<view class="margin-bottom-sm">兑换比例：<text>{{bili}} : 1</text></view>
						
						<view class="input-box">
							<view class="input-title">支付密码</view>
							<input placeholder="请输入支付密码" 
							placeholder-style='text-align:right;font-size: 26rpx;'
							v-model="pay_pwd"
							type="password"
							autocomplete="off"
							></input>
						</view>
						
						<view class="pay-btn" @click="modifyNum()">确认兑换</view>
						
					</view>
				</view>
			</view>
		</uniPopup>
		
		
	</view>
</template>

<script>
import { mapState } from 'vuex';
import uniPopup from '@/components/uni-popup/uni-popup';

export default {
	components: {
		uniPopup,
	},
	data() {
		return {
			data:{},
			poptitle:'',
			poptitle2:'',
			bili:'',
			cur_score:0,
			cur_type:1,
			
			num:'',
			pay_pwd:'',
			dhinfo:{},
		};
	},
	computed: {
		...mapState(['user'])
	},
	onLoad() {
		this.loadData();
		this.loadBili();
	},
	methods: {
		async loadData() {
			await uni.request({
				url: '/user/info',
				method: 'POST',
				success: res => {
					this.data = res.data;
				}
			});
		},
		async loadBili() {
			await uni.request({
				url: '/userproperty/dhinfo',
				method: 'POST',
				success: res => {
					this.dhinfo = res.data;
				}
			});
		},
		openPopup(type, score){
			this.cur_type = type;
			this.cur_score = score;
			
			if(type==1 || type==2 || type==3 || type==4){
				this.poptitle = '兑换马家窑积分';
			}
			
			if(type==1){
				this.poptitle2 = '购物';
				this.bili = this.dhinfo.score_gw;
			}
			
			if(type==2){
				this.poptitle2 = '学习';
				this.bili = this.dhinfo.score_study;
			}
			
			if(type==3){
				this.poptitle2 = '分享';
				this.bili = this.dhinfo.score_share;
			}
			
			if(type==4){
				this.poptitle2 = '签到';
				this.bili = this.dhinfo.score_sign;
			}
			
			if(type==5){
				this.poptitle = '兑换股权';
				this.poptitle2 = '马家窑';
				this.bili = this.dhinfo.score_mjygq;
			}
			
			this.$refs.uniPopup.open();
		},
		closeModel(){
			this.$refs.uniPopup.close();
			this.num = '';
			this.pay_pwd = '';
			this.bili = '';
		},
		modifyNum(){
			if(!this.num){
				this.$wanlshop.msg('请输入兑换数量');
				return '';
			}
			
			if(!this.pay_pwd){
				this.$wanlshop.msg('请输入支付密码');
				return '';
			}
			
			let api = '';
			if(this.cur_type==1){
				api = '/userproperty/dhscore';
			}
			
			if(this.cur_type==2){
				api = '/userproperty/dhstudy_score';
			}
			
			if(this.cur_type==3){
				api = '/userproperty/dhshare_score';
			}
			
			if(this.cur_type==4){
				api = '/userproperty/dhsign_score';
			}
			
			if(this.cur_type==5){
				api = '/userproperty/dhmjy_score';
			}
			
			uni.request({
				url: api,
				data: {
					num:this.num,
					pay_pwd:this.pay_pwd,
				},
				method: 'POST',
				success: res => {
					res = res.res;
					if(res.code == 1){
						this.$wanlshop.msg("兑换成功");
						this.loadData();
						this.loadBili();
						this.$refs.uniPopup.close();
					}else{
						this.$wanlshop.msg(res.msg);
					}
				}
			});
		}
	}
};
</script>

<style>
/deep/ .uni-calendar-item--checked {
	background-color: #fa436a !important;
	color: #ffffff !important;
}
</style>

<style scoped lang="scss">
.wanl-money .title{
	color: rgba(255, 255, 255, .9);
}

.header-bg{
	padding: 20rpx;
}

.header-box{
	border-radius: 20rpx;
	border: 2rpx solid #fff;
}

.top-header{
	display: flex;
	align-items: center;
	justify-content: space-around;
}

.money-title{
	font-size: 40rpx;
}

.title-box{
	text-align: center;
	position: relative;
}

.line{
    width: 1px;
    height: 55px;
    background-color: hsla(0,0%,100%,.41);
}

.total-shouyi-box{
	display: flex;
	align-items: center;
	padding-left: 72rpx;
	font-size: 30rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #fff;
	line-height: 33rpx;
	background-color: #fe6600;
	padding-bottom: 20rpx;
	padding-top: 20rpx;
	margin-top: -2rpx;
}

.riqi-box{
	display: flex;
	align-items: center;
	padding-left: 72rpx;
	font-size: 30rpx;
	font-family: PingFang SC-Regular, PingFang SC;
	font-weight: 400;
	color: #fff;
	line-height: 33rpx;
	background-color: #fe6600;
	padding-bottom: 20rpx;
	padding-top: 20rpx;
	margin-top: -2rpx;
}

.cu-list.menu>.cu-item .content {
    font-size: 36rpx !important;
}

.w50{
	width: 50%;
}

.w30{
	width: 33%;
}

.duihuan{
	position: absolute;
	right: 20rpx;
	top: -10rpx;
	border: 2rpx solid #fff;
	font-size: 20rpx;
	border-radius: 20rpx;
	padding: 5rpx 10rpx 5rpx 10rpx;
}

.modal-body{
	height: 660rpx;
	background-color: #FFFFFF;
	border-radius: 20rpx;
	position: relative;
}

.modal-middle-title{
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 12rpx;
}

.modalImage{
	width: 698rpx;
	height: 204rpx;
}

.modal-box{
	position: absolute;
	top: 30rpx;
	left: 0rpx;
	width: 100%;
	padding-left: 28rpx;
	padding-right: 28rpx;
	padding-bottom: 28rpx;
}

.modal-title{
	font-size: 32rrpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
}

.close-image{
	width: 42rpx;
	height: 42rpx;
	position: absolute;
	top: 0rpx;
	right: 28rpx;
}

.modal-money{
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #292929;
	margin-top: 42rpx;
	margin-bottom: 27rpx;
}


.input-box{
	width: 646rpx;
	height: 88rpx;
	background: #FFFFFF;
	border: 1px solid #CCCCCC;
	border-radius: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0rpx 32rpx;
	margin-bottom: 32rpx;
	
	input{
		text-align: right;
		width: 350rpx;
	}
}

.pay-btn{
	width: 646rpx;
	height: 88rpx;
	background: #366BEB;
	border-radius: 20rpx;
	font-size: 28rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #FFFFFF;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 64rpx;
}

.pb50{
	padding-bottom: 100rpx;
}

.uni-popup{
	background-color: rgba(0,0,0,0.5);
}
</style>
